<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心</title>
		<style>
			/* 抓div元素  心主体 */
			div{
				width: 200px;
				height: 200px;
				background-color: #e4393c;
				/* 自适应居中 */
				margin: 300px auto;
				/* 旋转 */
				transform: rotate(135deg);
				/* 透明度属性：属性值 0~1 范围值 */
				opacity: .8;
				/* 滤镜属性：光晕：下阴影 
				drop-shadow(x值 y值  模糊范围 模糊颜色)
				*/
				filter: drop-shadow(0 0 50px #e4393c);
				/*动画属性:关键帧名称 过渡时间 过渡方式 无限循环*/
				animation: heart 2s linear infinite;
			}
			/* 伪类选择器：给元素附加上效果的选择器
			  语法：div:hover{} 当鼠标悬停到div上实现的[样式]效果
			  需求：鼠标悬停到中间心位置改成圆
			  选择器:before 在元素之前添加文本，通常与content:""
			  选择器:after 在元素之后添加文本,通常与content:""
			 */
			/* 伪类选择器div上方增加文本/画圆 */
			div:before{
				content:""; /*行转块*/
				/* 显示属性 
				display: block;转成块级元素
				display: inline;转成行级元素
				display: none;元素消失
				*/
				display: block;
				width: 200px;
				height: 200px;
				background-color: #e4393c;
				border-radius: 50%;
				/* 相对定位 */
				position: relative;
				left: -100px;
			}
			div:after{
				content:"";
				display: block;
				width: 200px;
				height: 200px;
				background-color: #e4393c;
				border-radius: 50%;
				position: relative;
				top: -100px;
			}
			
			/* ------------动画--------------- */
			/* 1.创建关键帧--手翻书 */
			@keyframes heart{
				/*3个画面：①等比例出现，防止跳帧 ②缩小比例 ③放大比例*/
				0%{
					/*转换属性：缩放属性值 
					1表示比例 
					.8表示缩小0.8倍
					1.2表示放大1.2倍
					transform复合属性：旋转 缩放
					*/
					transform: rotate(135deg) scale(1);
				}
				30%{
					transform: rotate(135deg) scale(.8);
				}
				100%{
					transform: rotate(135deg) scale(1.2);
				}
			}
		</style>
	</head>
	<body>
		<!-- 画一颗心：html 1个元素 -->
		<div></div>
		<!-- html5:元素的分类：按照元素的特点分为：
		          ①块元素：可以设置高宽，独占一行，典型块元素：div 【重点】
				  ②行元素：不可以设置高宽，可以在一行内显示，典型行元素：span
				      文本内容属于行元素
				  ③行内块元素：可以设置高宽，可以在一行内显示 典型行内块元素：img
		 -->
		 <!-- 音乐 老火狐 -->
		 <audio src="renxi.mp3"autoplay loop></audio>
	</body>
</html>